<template>
  <div v-if="detailAuth">
    <!-- 头部 -->
    <page-header :title="$t('m.Users_Details_Page')" />

    <div class="detail_div container">
      <div class="detail_left">
        <div class="detail_left_div">
          <div class="detail_title">
            <div style=" display: flex;align-items: center;">
              <span style="font-size: 16px;">{{
                $t('m.Order_essentialInformation')
              }}</span>
              <div
                class="detail_state"
                :style="info.state | valFormat($dict.user.state, 1)"
              >
                <span
                  class="detail_state_dot"
                  :style="info.state | valFormat(stateOption, 1)"
                ></span>
                <span class="detail_state_text">{{
                  info.state | stateFormat($dict.user.state)
                }}</span>
              </div>
            </div>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.User_ID') }}: </span>
            <span class="detail_text2">{{ info.ucode | strFormat }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Source') }}: </span>
            <span class="detail_text2">{{
              info.source | stateFormat(sourceOption) | strFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Users_Details_PhoneNo') }}: </span>
            <span class="detail_text2">{{
              info.phone | phoneFormat(info.code)
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Email') }}: </span>
            <span class="detail_text2">{{ info.email | strFormat }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Users_Registration_date') }}: </span>
            <span class="detail_text2">{{ info.createTime | dateformat }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Users_Last_login_date') }}: </span>
            <span class="detail_text2">{{ info.loginTime | dateformat }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Client_App_version') }}: </span>
            <span class="detail_text2">{{ info.appVersion | strFormat }}</span>
          </div>
          <!-- <div class="detail_text">
            <span>{{ 'openID' }}: </span>
            <span class="detail_text2">{{ info.wechatId | strFormat }}</span>
          </div> -->
          <div class="detail_text">
            <span>{{ $t('m.Mobile_phone_Brand') }}: </span>
            <span class="detail_text2">{{ info.brandName | strFormat }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Phone_model') }}: </span>
            <span class="detail_text2">{{ info.phoneModel | strFormat }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Mobile_system_type') }}: </span>
            <span class="detail_text2">{{ info.os | strFormat }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Users_Account_type') }}: </span>
            <span class="detail_text2" :class="`state-${info.type}`">{{
              info.type | stateFormat($dict.user.type) | strFormat
            }}</span>
            <el-button
              type="text"
              style="margin-left:10px;padding:0;text-decoration:underline;"
              @click="setWhiteList"
              v-if="info.type && whiteAuth"
              >{{ $t('m.Whitelist_setting') }}</el-button
            >
          </div>
        </div>

        <div class="detail_left_div">
          <div class="detail_title">
            {{ $t('m.Users_Payment_information') }}
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Accumulated_consumption') }}: </span>
            <span class="detail_text2">{{
              info.cumulativeConsumption | amountFormat
            }}</span>
          </div>
          <div class="detail_text">
            <span>{{ $t('m.Users_Usage_fréquency') }}: </span>
            <span class="detail_text2">{{
              info.cumulativeOrder | numberFormat
            }}</span>
          </div>
          <!-- <div class="detail_text">
            <span>{{ $t('m.Users_Deapoit') }}: </span>
            <span class="detail_text2">{{
              info.depositAmount | amountFormat
            }}</span>
            <el-button
              type="text"
              v-if="info.depositAmount > 0 && depositAuth"
              style="margin-left:10px;padding:0;text-decoration:underline;"
              @click="refundDeposit"
              >{{ $t('m.Refund_deposit') }}</el-button
            >
          </div>           -->
          <div class="detail_text">
            <span>{{ $t('m.Users_Bank_Card') }}: </span>
            <span class="detail_text2">{{
              info.userBankcard.length > 0
                ? info.userBankcard[0].cardNo
                  ? `**** **** **** ${info.userBankcard[0].cardNo}`
                  : info.userBankcard[0].customerId
                : '--'
            }}</span>
          </div>
        </div>
      </div>

      <div class="detail_right">
        <div class="detail_left_div">
          <div class="detail_title">{{ $t('m.Rental_order') }}</div>
          <table-order :ids="ids" />
        </div>
        <div class="detail_left_div">
          <div class="detail_title">
            {{ $t('m.agency_Transaction_records') }}
          </div>
          <table-transaction-record :ids="ids" />
        </div>
      </div>
    </div>

    <!-- 押金退款 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="refundDialog"
      :title="$t('m.Refund_deposit')"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1" style="padding:0;">
          {{ $t('m.Confirm_refund_deposit') }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refundDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="clickRefund" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>

    <!-- 修改用户 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="userDialog"
      :title="
        radioType == 1
          ? $t('m.Users_Modify_account_type')
          : $t('m.Link_whitelist')
      "
      width="848px"
      top="150px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="el_dialog_center">
          <div class="select_radio" v-show="radioType == 1">
            <div
              class="select_radio_div"
              v-for="item in selectList"
              :key="item.value"
              :class="{
                select_radio_div2: item.value == 2,
                select_radio_active: item.disabled
              }"
              @click="changeRadio(item)"
            >
              <div class="select_radio_div_text">{{ item.label }}</div>
              <img
                :src="
                  item.disabled
                    ? require('@/assets/imgs/work/ic_selected.svg')
                    : require('@/assets/imgs/work/ic_unselected@2x.png')
                "
                alt=""
                width="14px"
                height="14px"
              />
            </div>
          </div>
          <div class="dialog_content1" v-if="radio == 2 && radioType == 2">
            {{ $t('m.Set_Validity_period') }}*
          </div>
          <div
            class="dialog_content1"
            v-if="radio == 2 && radioType == 2"
            style=" padding-bottom: 0;"
          >
            <el-form style="width:100%" label-position="top">
              <el-form-item prop="days">
                <el-select
                  v-model="userItem.days"
                  filterable
                  :placeholder="$t('m.pleaseChoose')"
                  style="width:100%;height:100%;"
                >
                  <el-option
                    v-for="item in periodOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="dialog_content1" v-show="radio == 2 && radioType == 2">
            {{ $t('m.Link_whitelist') }}*
          </div>
          <div
            class="dialog_content1"
            v-if="radio == 2 && radioType == 2"
            style=" padding-bottom: 0;"
          >
            <el-form style="width:100%" label-position="top">
              <el-form-item prop="id">
                <el-select
                  v-model="userItem.id"
                  clearable
                  filterable
                  :placeholder="$t('m.pleaseChoose')"
                  style="width:100%;height:100%;"
                  @clear="userItem.item = ''"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="
                      (item.branchName ? item.branchName : $t('m.Platform')) +
                        '  ' +
                        $t('m.Free_duration_order2') +
                        (item.freeDuration ? item.freeDuration : '0') +
                        ($cache.getLang() == 'CN' ? '' : ' ') +
                        (item.freeDuration > 1
                          ? $t('m.hour4')
                          : $t('m.hour3')) +
                        '  ' +
                        (item.deposit ? $t('m.No_deposit_card') : '')
                    "
                    :value="item.id"
                    @click.native="getItem(item)"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <el-button
            class="el_button"
            v-if="radio == 2 && radioType == 1"
            @click="changeRadios"
          >
            {{ $t('m.Link_whitelist') }}
          </el-button>
          <div
            class="table-box"
            style=" min-width: 0px;padding:0 16px;"
            v-show="radio == 2 && radioType == 1"
          >
            <el-table :data="ruleList">
              <emptydata slot="empty" v-if="ruleList.length == 0" />
              <el-table-column
                :label="$t('m.Whitelist_ID')"
                prop="ruleCode"
                min-width="160"
              >
                <template #default="scope">
                  {{ scope.row.ruleCode | strFormat }}
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.Shop_name')"
                prop="branchName"
                min-width="160"
              >
                <template #default="scope">
                  {{
                    scope.row.branchName
                      ? scope.row.branchName
                      : $t('m.Platform') | strFormat
                  }}
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.Free_duration_order')"
                prop="expireTime"
                min-width="160"
              >
                <template #default="scope">
                  {{
                    (scope.row.freeDuration ? scope.row.freeDuration : '0')
                      | valFormat(durationOptions)
                  }}
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('m.No_deposit_card')"
                prop="rentBranchName"
                min-width="160"
              >
                <template slot-scope="scope">
                  <div>
                    {{
                      scope.row.deposit == false
                        ? $t('m.Station_List_Distribution_No')
                        : $t('m.Station_List_Distribution_Yes')
                    }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                :label="$t('m.Users_Details_Operation')"
                min-width="108"
              >
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    style="color:var(--text-color);border:none;padding:0;"
                    @click.native="clickPopup(scope.row)"
                  >
                    {{ $t('m.delete') }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel_btn" @click="cancelBtn()">{{
          $t('m.cancel')
        }}</el-button>
        <el-button class="cancel_btn confirm_btn" @click="confirmBtn()">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="compositeDialog"
      :title="$t('m.Delete_whitelist_rules')"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1" style="padding:0;">
          {{ $t('m.Confirm_Delete_whitelist_rules') }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="compositeDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="clickConfirm" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import TableOrder from '@/components/tables/table-order.vue'
import TableTransactionRecord from '@/components/tables/table-transaction-record.vue'
export default {
  components: { TableTransactionRecord, TableOrder },

  data () {
    return {
      info: {
        appleId: '',
        birthday: '',
        client: '',
        clientVersion: '',
        code: 0,
        createTime: '',
        cumulativeConsumption: 0,
        cumulativeOrder: 0,
        deposit: 0,
        depositAmount: 0,
        email: '',
        facebookId: '',
        frequency: 0,
        googleId: '',
        icon: '',
        id: 0,
        loginIp: '',
        loginTime: '',
        newUser: true,
        nickname: '',
        occupation: '',
        os: '',
        phone: '',
        phoneModel: '',
        realName: '',
        remark: '',
        reportNum: 0,
        sex: '',
        source: '',
        state: 0,
        systemVersion: '',
        token: '',
        type: 0,
        userBankcard: [
          // {
          //   "bankName": "",
          //   "bankType": "",
          //   "cardExpire": "",
          //   "cardNo": "",
          //   "createTime": "",
          //   "customerId": "",
          //   "expire": 0,
          //   "id": 0
          // }
        ],
        wechatId: ''
      },
      refundDialog: false,
      stateOption: [
        { value: 1, color: 'background: #4CE48A;' },
        { value: 2, color: 'background: #FF605A;' }
      ],
      userDialog: false,
      radioType: '',
      radio: '',
      selectList: [
        { value: 1, label: this.$t('m.Users_Normal_user'), disabled: false },
        { value: 2, label: this.$t('m.Whitelisted_users'), disabled: false }
      ],
      userItem: {
        days: 1,
        id: '',
        item: ''
      },
      //有效期选项
      periodOptions: [
        { value: 1, label: '1' + this.$t('m').Whitelist_Day },
        { value: 7, label: '1' + this.$t('m').Whitelist_Week },
        { value: 30, label: '1' + this.$t('m').Whitelist_Month },
        { value: 90, label: '3' + this.$t('m').Whitelist_Months },
        { value: 180, label: '6' + this.$t('m').Whitelist_Months },
        { value: 365, label: '12' + this.$t('m').Whitelist_Months }
      ],
      options: [],
      ruleList: [],
      //时间选项
      durationOptions: [
        {
          value: 0,
          label:
            '0' +
            (this.$cache.getLang() == 'CN' ? '' : ' ') +
            this.$t('m').hour3
        },
        {
          value: 1,
          label:
            '1' +
            (this.$cache.getLang() == 'CN' ? '' : ' ') +
            this.$t('m').hour3
        },
        {
          value: 2,
          label:
            '2' +
            (this.$cache.getLang() == 'CN' ? '' : ' ') +
            this.$t('m').hour4
        },
        {
          value: 3,
          label:
            '3' +
            (this.$cache.getLang() == 'CN' ? '' : ' ') +
            this.$t('m').hour4
        },
        {
          value: 6,
          label:
            '6' +
            (this.$cache.getLang() == 'CN' ? '' : ' ') +
            this.$t('m').hour4
        },
        {
          value: 12,
          label:
            '12' +
            (this.$cache.getLang() == 'CN' ? '' : ' ') +
            this.$t('m').hour4
        },
        {
          value: 24,
          label:
            '24' +
            (this.$cache.getLang() == 'CN' ? '' : ' ') +
            this.$t('m').hour4
        },
        {
          value: 48,
          label:
            '48' +
            (this.$cache.getLang() == 'CN' ? '' : ' ') +
            this.$t('m').hour4
        },
        {
          value: 72,
          label:
            '72' +
            (this.$cache.getLang() == 'CN' ? '' : ' ') +
            this.$t('m').hour4
        }
      ],
      // 来源
      sourceOption: [
        {
          value: '1',
          label: 'APP'
        },
        {
          value: '2',
          label: 'H5'
        }
      ],
      deleteParams: '',
      compositeDialog: false,
      ids: '',
      detailAuth: this.permissionsId(15), //用户详情
      depositAuth: this.permissionsId(172), //押金退款
      whiteAuth: this.permissionsId(173) //设置白名单
    }
  },
  created () {
    if (!this.detailAuth) {
      return
    }
    this.ids = this.$route.query.id
    this.getDetail()
  },
  methods: {
    changeRadio (items) {
      this.radio = items.value
      this.selectList.forEach(item => {
        item.value == items.value
          ? (item.disabled = true)
          : (item.disabled = false)
      })
      if (items.value == 2) {
        this.radioType = 1
      }
    },
    getItem (item) {
      this.userItem.item = item
    },
    changeRadios () {
      this.radioType = 2
      this.userItem = this.$options.data.call(this).userItem
    },
    clickPopup (item) {
      this.deleteParams = item
      this.compositeDialog = true
    },
    cancelBtn () {
      if (this.radio == 2 && this.radioType == 2) {
        this.radioType = 1
      } else {
        this.userDialog = false
      }
    },
    //确定用户身份/选择规则
    confirmBtn () {
      if (!this.radio) {
        this.$message.error(this.$t('m.Users_Please_select'))
        return
      }
      // console.log(this.list)
      if (this.radio == 1) {
        this.$api.user
          .modifyIdentity(this.$route.query.id, this.radio)
          .then(res => {
            if (res.code == 0) {
              this.$message.success(res.message)
              this.getDetail() //详情
              this.userDialog = false
            } else {
              this.$message.error(res.message)
            }
          })
      } else {
        if (this.radioType == 1) {
          if (this.ruleList.length == 0) {
            this.$message.error(this.$t('m.Link_whitelist'))
            return
          }
          let params = {
            uid: Number(this.$route.query.id),
            whitelist: []
          }
          this.ruleList.forEach(item => {
            params.whitelist.push({
              days: item.days,
              ruleId: item.ruleId
            })
          })
          this.$api.whiteList.userWhitelist(params).then(res => {
            if (this.$ok(res)) {
              this.$message.success(res.message)
              this.userDialog = false
              this.getDetail()
            } else {
              this.$message.error(res.message)
            }
          })
          // console.log(params, this.ruleList)
        } else {
          if (!this.userItem.days) {
            this.$message.error(this.$t('m.Please_validity_period'))
            return
          }
          if (!this.userItem.item) {
            this.$message.error(this.$t('m.Link_whitelist'))
            return
          }
          let params = { ...this.userItem.item, days: this.userItem.days }
          let index = this.ruleList.findIndex(items =>
            params.type == 1
              ? items.type === params.type
              : items.branchId === params.branchId
          )
          // console.log(index, params.type)
          if (params.type == 1) {
            this.ruleList = []
            this.ruleList.push(params)
          } else if (params.type == 2 && index !== -1) {
            this.$set(this.ruleList, index, params)
            this.ruleList = this.ruleList.filter(item => {
              return item.type !== 1
            })
          } else {
            this.ruleList.push(params)
            this.ruleList = this.ruleList.filter(item => {
              return item.type !== 1
            })
          }
          this.radioType = 1
          // console.log(this.ruleList)
        }
      }
    },
    clickConfirm () {
      let del1 = this.ruleList.findIndex(item => {
        if (item.ruleId == this.deleteParams.ruleId) {
          return true
        }
      })
      this.ruleList.splice(del1, 1)
      this.$message.success(this.$t('m.S_Success'))
      this.compositeDialog = false
    },
    // 设置白名单
    setWhiteList () {
      this.ruleList = []
      this.radioType = 1
      this.userDialog = true
      this.radio = this.info.type.toString()
      this.$api.whiteList.getRuleOption().then(res => {
        if (this.$ok(res)) {
          // console.log(res.data);
          this.options = res.data
        }
      })
      this.selectList.forEach(item => {
        item.value == this.radio
          ? (item.disabled = true)
          : (item.disabled = false)
      })
      this.radio == 2 ? this.getUserRules() : ''
    },
    //获取用户已绑定的规则
    getUserRules () {
      let uid = {
        uid: this.$route.query.id
      }
      this.$api.whiteList.userBoundRules(uid).then(res => {
        if (this.$ok(res)) {
          this.ruleList = res.data
          // console.log(res.data);
        }
      })
    },

    //获取用户详情
    getDetail () {
      this.$api.user.getDetail(this.$route.query.id).then(res => {
        if (this.$ok(res)) {
          this.info = res.data
        }
      })
    },

    //打开退款弹窗
    refundDeposit () {
      this.refundDialog = true
    },

    //确认退押金
    clickRefund () {
      this.$api.user.refundDeposit(this.$route.query.id).then(res => {
        if (this.$ok(res)) {
          this.refundDialog = false
          this.$message.success(res.message)
          this.getDetail()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.state-1 {
  color: #00eb8a;
}

.state-2 {
  color: #fd5849;
}

.item {
  // 第三个元素
  & > span:nth-child(3),
  & > div:nth-child(3) {
    position: absolute;
    right: 0;
    color: $color;
    cursor: pointer;
  }
}
.el_button {
  padding: 10px;
  min-width: 88px;
  background: #ffffff !important;
  border: 1px solid #d2d8e2 !important;
  border-radius: 4px;
  color: var(--text-color);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
</style>
